<template>
    <div class="editor-el">
        <div></div>
        <el-input v-show="false" v-model="value"></el-input>
    </div>
</template>

<script lang="ts">
// 引入 wangEditor
import wangEditor from "wangeditor";
import { Component, Vue, Model, Emit, Watch } from "vue-property-decorator";
import "./formatBrush";
@Component({})
export default class servicesNoticeEdit extends Vue {
    // v-model绑定值
    @Model("valuechange", { type: String }) value!: String;
    @Emit("valuechange") setValue() {}

    @Watch("value", { immediate: true }) updateValue(v: string) {
        if (v) {
            const me = this as any;
            if (me.isUp) {
                // 这里通过标识符避免重复触发事件
                me.isUp = false;
            } else {
                me.$nextTick(() => {
                    // 重新设置编辑器内容
                    me.editor.txt.html(v);
                });
            }
        }
    }
    editor: any = null;
    // 标识是否正在设置数据，避免重复触发事件
    isUp: Boolean = false;
    mounted() {
        const me = this as any,
            // eslint-disable-next-line new-cap
            editor = new wangEditor(me.$el.firstChild) as any;
        // zIndex配置小点，避免影响其他组件
        editor.config.zIndex = 100;
        // 配置 onchange 回调函数，将数据同步到 vue 中
        editor.config.onchange = (newHtml: string) => {
            me.isUp = true;
            me.setValue(newHtml);
        };

        // 创建编辑器
        editor.create();
        me.editor = editor;
    }
    beforeDestroy() {
        // 调用销毁 API 对当前编辑器实例进行销毁
        this.editor.destroy();
        this.editor = null;
    }
}
</script>
<style scoped lang="scss">
::v-deep.editor-el {
    // 格式刷功能激活图标样式
    .w-e-menu.w-e-active {
        color: red;
    }
}
</style>